<template>
    <div class="ln">
        <van-nav-bar
                title="会员注册"
                left-arrow
                @click-left="onClickLeft"
        />
        <div style="background-color: #fff;">
            <p style="height: 10px;"></p>
            <div class="bg">
                <div class="li">
                    <input type="text" style="border: none;outline: none;width:100%;" v-model="value1"
                           placeholder="请输入手机号">
                </div>
                <div class="li">
                    <input type="text" style="border: none;outline: none;width:100%;" v-model="value2"
                           placeholder="请输入图片验证码">
                    <p style="margin-left: 5px;"><img
                            :src="'https://api.javamall.com.cn/base/captchas/uGMytogGylPIccvHf2uH/LOGIN?r='+codes"
                            alt=""
                            @click="code" style="width: 60px;
    height: 30px;"></p>
                </div>
                <div class="li">
                    <input type="text" style="border: none;outline: none;width:100%;" v-model="value3"
                           placeholder="请输入短信验证码">
                    <button @click="again" style="margin-left: 5px;
    color: #c0c4cc;
    font-size: 11px;
    padding-top: 1px;width: 32%;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;color: #fff;
    border:none;    border-radius: 5px;
    border-color: #fa3534;
    background-color: #fa3534;">获取验证码
                    </button>
                </div>
                <van-button round type="danger" style="opacity:.5;width: 100%;margin: 10px">下一步</van-button>
            </div>
        </div>
        <van-action-sheet v-model="show" title="用户注册协议" :closeable="false" :close-on-click-overlay="false">
            <div v-html="xy" style="padding: 0 15px 10px 15px;
    box-sizing: border-box;font-size: 14px;"> </div>
            <div style="position: fixed;bottom: 0;display: flex;width: 100%;text-align: center;background-color: #fff;padding: 10px 0;
    height: 50px;
    padding-bottom: 0;
    line-height: 50px;font-size: 14px">
                <p @click="notAgree" style="width: 50%;">不同意</p>
                <p @click="agree" style="width: 50%;color: #fff;
    background-color: #fa3534;">同意</p>
            </div>
        </van-action-sheet>

    </div>
</template>

<script>
    import uuidv1 from "uuid/v1"
    import jsp from '../../Api/Api'

    export default {
        name: "Login",
        data() {
            return {
                value1: '',
                value2: '',
                value3: '',
                codes: 0,
                xy: '',
                show: true,
                id:'',
            }
        },
        created() {
            jsp.paction().then(data => {
                // console.log(data.data)
                this.xy = data.data.content
            }).catch(er => console.log(er))
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            code() {
                // //生成uuid
                // this.id = uuidv1()
                // console.log(this.id)
                let a = Math.floor(Math.random() * 100)
                this.codes = a + a
            },
            again() {
                this.code()
            },
            agree() {
                this.show = false
            },
            notAgree() {
                this.$router.push('/home')
            },
        },
    }
</script>

<style scoped>
    >>> .van-nav-bar .van-icon {
        color: #000 !important;
    }

    .bg {
        background-color: #fff;
        margin: 15px;
        border-radius: 10px;
        padding: 10px 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }

    >>> .van-hairline--bottom::after {
        border: none;
    }

    .van-button {
        height: 40px !important;
    }

    .li {
        padding: 10px 0;
        font-size: 14px;
        color: #303133;
        box-sizing: border-box;
        line-height: 35px;
        border: 0 solid #e4e7ed;
        border-bottom-width: 1px;
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
    }

</style>